<!--
  * 考勤
  *
  * @Author:    wy
  * @Date:      2024-09-25 17:09:55
  * @Copyright  <a href="https://1024lab.net">1024创新实验室</a>
-->
<template>
  <a-modal title="详情"
           width="140"
           :open="visibleFlag"
           @cancel="onClose"
           :maskClosable="false"
           :destroyOnClose="true"
           :footer="null">
    <a-table size="small"
             :dataSource="tableData"
             :columns="columns"
             rowKey="id"
             bordered
             :loading="tableLoading"
             :pagination="false">
      <template #bodyCell="{ text, record, column }">
        <template v-if="column.dataIndex === 'employeeEntity'">
          <span>{{record.employeeEntity.actualName}}</span>
        </template>
        <template v-if="column.dataIndex === 'checkType'">
          {{ record.checkType === 'OnDuty' ? '上班' : '下班' }}
        </template>
        <template v-if="column.dataIndex === 'timeResult'">
          {{ getTimeResultText(record.timeResult) }}
        </template>
        <template v-if="column.dataIndex === 'locationResult'">
          {{getLocationResult(record.locationResult)}}
        </template>
      </template>
    </a-table>

    <!-- <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template> -->
  </a-modal>
</template>
<script setup>
import { reactive, ref, nextTick } from 'vue';
import _ from 'lodash';
import { message } from 'ant-design-vue';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { attendanceApi } from '/@/api/business/attendance/attendance-api';
import { smartSentry } from '/@/lib/smart-sentry';
import { useUserStore } from '/@/store/modules/system/user';
import { employeeApi } from '/src/api/system/employee-api';

// ------------------------ 事件 ------------------------

const emits = defineEmits(['reloadList']);

// ------------------------ 显示与隐藏 ------------------------
// 是否显示
const visibleFlag = ref(false);

function show (rowData) {
  console.log('rowData', rowData)
  queryData(rowData.checkData)
  Object.assign(form, formDefault);
  if (rowData && !_.isEmpty(rowData)) {
    Object.assign(form, rowData);
  }
  visibleFlag.value = true;
}

function onClose () {
  Object.assign(form, formDefault);
  visibleFlag.value = false;
}

// ------------------------ 表格 ------------------------
const columns = ref([
  {
    title: '姓名',
    dataIndex: 'employeeEntity',
    ellipsis: true,
  },
  {
    title: '实际打卡时间',
    dataIndex: 'userCheckTime',
    ellipsis: true,
  },
  {
    title: '考勤类型',
    dataIndex: 'checkType',
    ellipsis: true,
  },
  {
    title: '打卡结果',
    dataIndex: 'timeResult',
    ellipsis: true,
  },
  {
    title: '位置结果',
    dataIndex: 'locationResult',
    ellipsis: true,
  },
]);

// ------------------------ 表单 ------------------------

// 组件ref
const formRef = ref();

const formDefault = {
  id: undefined,
  id: undefined, //id
  userId: undefined, //用户ID
  userCheckTime: undefined, //实际打卡时间
  checkType: undefined, //考勤类型
  groupId: undefined, //考勤组ID
  timeResult: undefined, //打卡结果
  locationResult: undefined, //位置结果
  procInstId: undefined, //审批流程实例ID
};

let form = reactive({ ...formDefault });

const rules = {
  id: [{ required: true, message: 'id 必填' }],
};

// 点击确定，验证表单
async function onSubmit () {
  try {
    await formRef.value.validateFields();
    save();
  } catch (err) {
    message.error('参数验证错误，请仔细填写表单数据!');
  }
}

// 新建、编辑API
async function save () {
  SmartLoading.show();
  try {
    if (form.id) {
      await attendanceApi.update(form);
    } else {
      await attendanceApi.add(form);
    }
    message.success('操作成功');
    emits('reloadList');
    onClose();
  } catch (err) {
    smartSentry.captureError(err);
  } finally {
    SmartLoading.hide();
  }
}

const queryFormState = {
  userId: undefined,//用户id
  userCheckTime: [], //实际打卡时间
  userCheckTimeBegin: undefined, //实际打卡时间 开始
  userCheckTimeEnd: undefined, //实际打卡时间 结束
  groupId: undefined, //考勤组ID
  timeResult: undefined, //打卡结果
  locationResult: undefined, //位置结果
  checkType: undefined, //考勤类型
  pageNum: 1,
  pageSize: 10,
  employeeEntity: {
    actualName: undefined,
  }
};
// 查询表单form
const queryForm = reactive({ ...queryFormState });
// 表格加载loading
const tableLoading = ref(false);
// 表格数据
const tableData = ref([]);
// 总数
const total = ref(0);
const userStore = useUserStore();
// 查询数据
async function queryData (checkData) {
  tableLoading.value = true;
  try {
    const form = {
      employeeId: userStore.employeeId,
    };
    //获取登录用户信息
    const data = await employeeApi.queryWeather(form);
    queryForm.userId = data.userId
    queryForm.userCheckTimeBegin = checkData
    queryForm.userCheckTimeEnd = checkData.split(' ')[0] + ' 23:59:59'
    let queryResult = await attendanceApi.queryPage(queryForm);
    tableData.value = queryResult.data.list;
    total.value = queryResult.data.total;
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    tableLoading.value = false;
  }
}

//打卡结果列表转换
function getTimeResultText (checkType) {
  switch (checkType) {
    case 'Normal':
      return '正常';
    case 'Early':
      return '早退';
    case 'Late':
      return '迟到';
    case 'SeriousLate':
      return '严重迟到';
    case 'Absenteeism':
      return '旷工迟到';
    case 'NotSigned':
      return '未打卡';
    default:
      return '未知状态';
  }
}

//位置结果列表转换
function getLocationResult (locationResult) {
  switch (locationResult) {
    case 'Normal':
      return '范围内';
    case 'Outside':
      return '范围外';
    case 'NotSigned':
      return '未打卡';
    default:
      return '未知状态';
  }
}

defineExpose({
  show,
});
</script>
